<template>
  <div class="content_box" id="pdfDom">
    <div class="top">
      <h6>编号：</h6>
      <div class="centent">
        <h3>应收账款信息确认函</h3>
      </div>
      <h5 style="font-weight: 400">{{ orgname }}：</h5>
      <p>
        鉴于我司拟向中国邮政储蓄银行股份有限公司办理<span style="text-decoration: underline"
          >应收账款质押融资</span
        >业务，特向贵司提交此应收账款确认申请，以确认我司向贵司或贵司关联方提供货物/服务所产生的应收账款信息。
      </p>
      <p>应收账款信息如下：</p>
      <div class="table">
        <el-table
          style="width: 100%"
          :data="userData"
          border
          highlight-current-row
          stripe
          :header-cell-style="{
            color: '#4D4D4D'
          }"
        >
          >
          <el-table-column prop="a" label="合同编号" min-width="5%" align="center">
          </el-table-column>
          <el-table-column prop="b" label="合同名称" min-width="5%" align="center">
          </el-table-column>
          <el-table-column prop="c" label="发票号码" min-width="5%" align="center">
          </el-table-column>
          <el-table-column prop="d" label="发票代码" min-width="5%" align="center">
          </el-table-column>
          <el-table-column prop="e" label="应收账款金额（元）" min-width="6%" align="center">
            <template slot-scope="scope">{{ scope.row.e | getArea }}</template>
          </el-table-column>
          <el-table-column prop="f" label="付款日期" min-width="4%" align="center">
          </el-table-column>
        </el-table>
      </div>
      <p>自贵司确认上述应收账款信息之日起，上述合同收款账户变更为如下账户：</p>
      <div class="table">
        <el-table
          style="width: 100%"
          :data="userData"
          border
          highlight-current-row
          stripe
          :header-cell-style="{
            color: '#4D4D4D'
          }"
        >
          >
          <el-table-column prop="g" label="户名" min-width="10%" align="center"> </el-table-column>
          <el-table-column prop="h" label="账号" min-width="10%" align="center"> </el-table-column>
          <el-table-column prop="i" label="开户行" min-width="8%" align="center"> </el-table-column>
        </el-table>
      </div>
      <p>
        若贵司认可并同意上述信息，请在应收账款确认函（回执）盖章证明，并将回执联邮寄至以下地址：
      </p>
      <p>收件地址：</p>
      <p>收件人姓名及联系方式：</p>
      <div class="right">
        <p>{{ entname }}（公章）</p>
        <div style="margin-top: 0.026rem">年<span></span>月<span></span>日</div>
      </div>
      <div class="inner-border"></div>
    </div>
    <div class="top" style="border: 0px">
      <div class="centent">
        <h3>应收账款信息确认函（回执）</h3>
      </div>
      <h5 style="margin-bottom: 0.0521rem; font-weight: 400">{{ entname }}：</h5>
      <p style="margin-bottom: 0.0521rem">
        我司已收到贵司于<span
          style="display: inline-block; width: 40px; text-indent: 0em; text-align: right"
        ></span
        >年<span
          style="display: inline-block; width: 20px; text-indent: 0em; text-align: right"
        ></span
        >月<span
          style="display: inline-block; width: 20px; text-indent: 0em; text-align: right"
        ></span
        >日签署的编号为<span
          style="display: inline-block; width: 110px; text-indent: 0em; text-align: right"
        ></span
        >的《应收账款信息确认函》，现确认同意下述内容。
      </p>

      <div class="table" style="margin: 0px">
        <el-table
          style="width: 100%"
          :data="userData"
          border
          highlight-current-row
          stripe
          :header-cell-style="{
            background: '#FFF',
            color: '#4D4D4D'
          }"
        >
          <el-table-column label="应收账款信息">
            <el-table-column prop="a" label="合同编号" min-width="5%" align="center">
            </el-table-column>
            <el-table-column prop="b" label="合同名称" min-width="5%" align="center">
            </el-table-column>
            <el-table-column prop="c" label="发票号码" min-width="5%" align="center">
            </el-table-column>
            <el-table-column prop="d" label="发票代码" min-width="5%" align="center">
            </el-table-column>
            <el-table-column prop="e" label="应收账款金额（元）" min-width="6%" align="center">
              <template slot-scope="scope">{{ scope.row.e | getArea }}</template>
            </el-table-column>
            <el-table-column prop="f" label="付款日期" min-width="4%" align="center">
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>
      <div class="table" style="margin: 0px">
        <el-table
          style="width: 100%"
          :data="userData"
          highlight-current-row
          stripe
          :header-cell-style="{
            background: '#FFF',
            color: '#4D4D4D'
          }"
        >
          <el-table-column label="变更收款账户信息">
            <el-table-column prop="g" label="户名" min-width="10%" align="center">
            </el-table-column>
            <el-table-column prop="h" label="账号" min-width="10%" align="center">
            </el-table-column>
            <el-table-column prop="i" label="开户行" min-width="8%" align="center">
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>
      <h5 style="margin: 0.0521rem 0 0.026rem 0; text-indent: 2em">应收账款确认声明：</h5>
      <p>1、我司确认本上述应收账款对应的交易及资料真实、合法、有效；</p>
      <p>2、自本回执签署生效之日起，针对上述应收账款项下付款均以现金转账方式支付至上述收款账户。</p>
      <div class="right">
        <p>{{ orgname }}（公章）</p>
        <div style="margin-top: 0.026rem">年<span></span>月<span></span>日</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['formList'],
  data() {
    return {
      userData: null,
      entname: '',
      orgname: ''
      // year: '',
      // month: '',
      // day: ''
    }
  },
  // 过滤器
  filters: {
    getArea: function (value) {
      value = parseFloat(value)
      if (!value) return '-'
      // 将数值截取，保留两位小数
      value = value.toFixed(2)
      if (value <= 0) return '-'
      // 获取整数部分
      const intPart = Math.trunc(value)
      // 整数部分处理，增加,
      const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
      // 预定义小数部分
      let floatPart = '.00'
      // 将数值截取为小数部分和整数部分
      const valueArray = value.toString().split('.')
      if (valueArray.length === 2) {
        // 有小数部分
        floatPart = valueArray[1].toString() // 取得小数部分
        return intPartFormat + '.' + floatPart
      }
      return intPartFormat + floatPart
    }
  },
  mounted() {
    this.userData = this.formList
    this.entname = sessionStorage.getItem('entname')
    this.orgname = localStorage.getItem('orgname')
    // const date = new Date()
    // this.year = date.getFullYear() // 获取当前年份，例如：2021
    // this.month = date.getMonth() + 1 // 获取当前月份，注意需要加1，例如：9
    // this.day = date.getDate() // 获取当前日期，例如：22
  }
}
</script>

<style lang="scss" scoped>
.content_box {
  box-sizing: border-box;
  padding: 0 0.1042rem;
  width: 100%;
  overflow: auto;
  .top {
    box-sizing: border-box;
    padding-bottom: 0.0052rem;
    border-bottom: 0.0052rem solid #000;
    margin-bottom: 0.1302rem;
    .inner-border {
      border-bottom: 0.0052rem solid #000;
    }
  }
  h6 {
    font-size: 0.0781rem;
    color: #777;
    font-weight: 400;
    font-family: '仿宋';
  }
  h5 {
    font-size: 0.0781rem;
    color: #000;
    font-family: '仿宋';
  }
  p {
    text-indent: 2em;
    font-size: 0.0833rem;
    color: #222;
    line-height: 0.2083rem;
    font-family: '仿宋';
  }
  .centent {
    width: 100%;
    text-align: center;
    margin: 0.026rem 0;
    h3 {
      font-size: 0.0938rem;
      color: #000;
      font-family: '仿宋';
    }
  }
  .right {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-bottom: 0.0677rem;
    div {
      display: flex;
      color: #222;
      font-family: '仿宋';
      font-size: 0.0833rem;
      span {
        width: 0.1302rem;
      }
    }
  }
}

// 表格
.table {
  box-sizing: border-box;
  width: 100%;
  cursor: pointer;
  overflow: auto;
  margin: 0.0521rem 0;
  display: flex;
}
::v-deep .el-table .el-table__cell {
  text-align: center;
}
::v-deep .el-table {
  font-size: 0.0729rem;
  font-family: '仿宋';
}
</style>
